<template>
  <div class="view-wait-pay">
    <div>
      <h1>需支付: {{travelInfo.orderTotalAmount}}元</h1>
      <div class="flex1 top">
        <div class="topline">
          <img src="/static/images/user-time.png" class="img1"/>
          <div class="right-text">
            <text class="tx1">{{travelInfo.orderTime}} 分钟</text>
            <text class="tx2">骑行时长</text>
          </div>
        </div>
        <div class="topline">
          <img src="/static/images/user-amount.png" class="img2"/>
          <div class="right-text">
            <text class="tx1">{{travelInfo.orderTotalAmount}} 元</text>
            <text class="tx2">骑行费用</text>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="payWay">支付方式</div>
      <div v-for="(item,index) in paymentList" :key="index">
        <div class="payment flex1" v-if="item.payMethod != '2'" @click="selectPayment(item,index)">
          <div class="payment-label">
            <img class="icon" :src="item.icon">
            <span class="text">{{item.title}}</span>
            <span class="gray" v-if="item.isEnough==0 && item.payMethod!=1">{{item.mark}}</span>
            <span class="gray" v-if="item.isEnough ==1 && item.payMethod==3 && item.mCoinCount">({{travelInfo.mCoinCount}}元)</span>
          </div>
          <div class="but">
            <img class="select" src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/selected.png" v-if="item.selected">
            <img class="select" :class="{'disabled':item.disabled}" src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/unselected.png" v-else>
          </div>
        </div>
      </div>
    </div>
    <div class="fix-btn">
      <button class="btn" :class="{'pass': payMethod}" :disabled="!payMethod" @click="toPay">确定支付</button>
    </div>

  </div>
</template>

<script>
  import Service from '@/utils/service'
  import {showToast} from '@/utils/index'

  export default {
    data() {
      return {
        travelInfo: {
          orderTotalAmount: '',
          first: [],
          second: [],
          third: [],
          realPaymentId:''
        },
        paymentList: [],
        payMethod: '',
        session: {},
        orderNo: '', //自动跳转到待支付时带的orderNo
        paying:true
      }
    },
    onUnload() {
    },
    onLoad(options) {
      if (options.autoPay) {
        this.orderNo = options.orderNo
        this.travelInfo.orderNo = options.orderNo
        this.getCostDetail(options.orderNo)
      } else {
        this.travelInfo = JSON.parse(options.travelInfo)
        let pay = this.travelInfo.payList
        this.paymentList = []
        pay.forEach(item2=>{
          item2.payData.forEach(item=>{

            item['selected'] =false
            item['show'] = true
            item['value'] = item.realPaymentId

            this.paymentList.push(item)
          })
        })

      }
    },
    methods: {
      getCostDetail(orderNo) {
        let data = {
          orderNo: orderNo
        }
        Service.getCostDetail(data).then((res) => {
          if (res.code == 200) {
            this.travelInfo = res.data
            this.travelInfo.orderNo = this.orderNo

          } else if (res.code == 300) {
            setTimeout(() => {
              wx.reLaunch({
                url: '../paySuccess/main?orderNo=' + this.orderNo
              })
            },200)
          }
        })
      },
      toPay() {
        if (!this.paying) {
          return
        }
        switch (this.payMethod) {
          case 5: //企业支付
            this.payBusiness()
            break
          case 3: //蜜币支付
            this.payMCoin()
            break
          case 1: //微信支付
            this.jscode2session()
            break
          case 9: //蜜币支付
            this.payQinqing()
            break
        }
        this.paying = false
        let _this = this
        setTimeout(() => {
          _this.paying = true
        },2000)
      },
      payQinqing(){
        let data = {
          payMethod:this.payMethod,
          orderNo: this.travelInfo.orderNo,
          realPaymentId:this.realPaymentId
        }
        let _this = this
        Service.payQinqing(data).then((res) => {
//          _this.paying = true
          if (res.code == 200) {
            setTimeout(() => {
              wx.reLaunch({
                url: '../paySuccess/main?orderNo=' + _this.travelInfo.orderNo
              })
            },200)
          } else if (res.code == 121) {

          }
        })
      },
      payBusiness() { //企业支付
        let data = {
          orderNo: this.travelInfo.orderNo,
          realPaymentId:this.realPaymentId
        }
        Service.payBusiness(data).then((res) => {
//          this.paying = true
          if (res.code == 200) {
            setTimeout(() => {
              wx.reLaunch({
                url: '../paySuccess/main?orderNo=' + this.travelInfo.orderNo
              })
            },200)
          } else if (res.code == 121) {

          }
        })
      },
      payMCoin() { //蜜币支付
        let data = {
          orderNo: this.travelInfo.orderNo
        }
        Service.payMCoin(data).then((res) => {
//          this.paying = true
          if (res.code == 200) {
            setTimeout(()=> {
              wx.reLaunch({
                url: '../paySuccess/main?orderNo=' + this.travelInfo.orderNo
              })
            },200)
          } else if (res.code == 121) {

          }
        })
      },
      payWechat() { //微信支付
        let adCode = wx.getStorageSync('adCode')
        let data = {
          payMethod: '1',//微信
          paymentType: '1',//用车
          adCode: adCode,
          openId: this.session.openid,
          orderNo: this.travelInfo.orderNo
        }
        let _this = this
        Service.prePay(data).then((res) => {
          if (res.code == 200) {
            let payParam = res.data

            wx.requestPayment({
              timeStamp: res.data.timeStamp + '',
              nonceStr: res.data.nonceStr + '',
              package: res.data.package + '',
              signType: 'MD5',
              paySign: res.data.sign + '',
              success(res) {
                wx.showToast({
                  title: '支付成功',
                  icon: 'success',
                  duration: 1000
                });
                setTimeout(()=>{
                  wx.reLaunch({

                    url: '../paySuccess/main?orderNo=' + _this.travelInfo.orderNo
                  })
                },1000)

              },
              fail(res) {
                _this.getCostDetail(_this.travelInfo.orderNo)
              },
              complete(res) {
//                _this.paying = true
              }
            })
          } else if(res.code == 121){
            setTimeout(()=>{
              wx.reLaunch({
                url: '../index/main'
              })
            },2000)
          }
        })
      },
      jscode2session() {
        let _this = this
          wx.login({
            success: res => {
              // 发送 res.code 到后台换取 openId, sessionKey, unionId
              if (res.code) {
                let data = {code: res.code}
                Service.jscode2session(data).then((res) => {
                  if (res) {
                    _this.session = res
                    _this.payWechat()
                    // resolve(res)
                  }
                })
              }
            }
          })
      },
      getCostDetail(orderNo) {
        let data = {
          orderNo: orderNo
        }
        Service.getCostDetail(data).then((res) => {
          if (res.code == 300) {
            setTimeout(() => {
              wx.reLaunch({
                url: '../paySuccess/main?orderNo=' + orderNo
              })
            },1000)
          }
        })
      },
      selectPayment(item,index) {
        if (!item.disabled) {
          this.paymentList.forEach((i) => {
            i.selected = false
          })

          if(item.payMethod == 5 || item.payMethod == 9){
            this.realPaymentId = item.realPaymentId
          }
          this.payMethod = item.payMethod

          item.selected = true
          this.$set(this.paymentList,index,item)
        }
      }
    }
  }
</script>

<style scoped>
.top {
    padding: 0 3%;
    height: 178px;
    margin: 10px auto 20px;
    text-align: center;
  }
  .topline{
    padding: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48%;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  }
  .img1 {
    margin-right: 5px;
    float: left;
    width: 80px;
    height: 80px;
  }

  .img2 {
    margin-right: 10px;
    float: left;
    width: 80px;
    height: 80px;
  }
  .flex1 {
    justify-content: space-between;
  }
  .right-text {
    text-align: left;
  }

  .tx1 {
    display: block;
    font-size: 32px;
    font-weight: 500;
    color: #523A24;
    line-height: 30px;
    /* display: inline-block; */
  }

  .tx2 {
    font-size: 24px;
    color: #999;
    margin-top: 20px
  }
  .payWay {
    padding-left: 3%;
    margin: 50px 0;
    color: #999;
    font-size: 32px;
  }
.daizf{
  margin-top: 40px
}
.borderline{
  width:100%;
  border-top: 2px solid #ddd

}
  .view {
    padding: 50px 50px 170px 50px;
    text-align: center;
  }

  .img3 {
    width: 176px;
    height: 152px;
    margin-top: 253px;
    margin-bottom: 36px;
  }

  h1 {
    line-height: 100px;
    font-size: 38px;
    padding-left: 3%;
    text-align: left;
    margin: 20px 0 30px;
  }

  .flex1 {
    justify-content: space-between;
    font-size: 30px;
    font-family: PingFangSC-Regular;
    color: rgba(102, 102, 102, 1);
    line-height: 42px;
  }

  .flex1 text {
    line-height: 55px;
  }

  .gray-font {
    color: #666;
  }

  .fix-btn {
    margin: 100px 0 20px;
    width: 100%;
  }

  .fix-btn .btn {
    margin-top: 35px;
    margin-bottom: 35px;
  }

  .green-font {
    color: #2C9D23;
  }

  .gray001-font {
    color: #ddd;
  }

  .red-font {
    color: #FF5E5E;
  }

  .otherpay text {
    line-height: 120px;
  }

  .payment {
    padding: 0 3%;
    height: 120px;
    line-height: 120px;
    border-bottom: 2px solid #DDDDDD;
    font-size: 30px;
    color: #333333;
  }

  .payment-label, .but {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .gray {
    color: #999
  }

  .icon {
    width: 50px;
    height: 50px;
    margin-right: 20px;
  }

  .select {
    width: 48px;
    height: 48px;
  }

  .disabled {
    border-radius: 24px;
    background: #E7E7E7;
  }
</style>
